<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="模板编码" prop="templateCode">
        <el-input v-model="queryParams.templateCode" placeholder="请输入模板编码" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="模板名称" prop="templateName">
        <el-input v-model="queryParams.templateName" placeholder="请输入种类模板名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="属性ID" prop="attrId">
        <el-input
          v-model="queryParams.attrId"
          placeholder="请输入属性ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="属性名" prop="attrName">
        <el-input v-model="queryParams.attrName" placeholder="请输入属性名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="输入类型" prop="showType">
        <el-select v-model="queryParams.showType" placeholder="选择输入框类型" clearable style="width: 215px">
          <el-option v-for="dict in dict.type.mes_attr_input_type" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用" prop="enableFlag">
        <el-select v-model="queryParams.enableFlag" placeholder="启用状态" clearable style="width: 215px">
          <el-option v-for="dict in dict.type.mes_enable_status" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>

        <!-- <el-input
          v-model="queryParams.enableFlag"
          placeholder="请输入是否启用"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
      </el-form-item>
      <!-- <el-form-item label="预留字段1" prop="attr1">
        <el-input
          v-model="queryParams.attr1"
          placeholder="请输入预留字段1"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="预留字段2" prop="attr2">
        <el-input
          v-model="queryParams.attr2"
          placeholder="请输入预留字段2"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="预留字段3" prop="attr3">
        <el-input
          v-model="queryParams.attr3"
          placeholder="请输入预留字段3"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="预留字段4" prop="attr4">
        <el-input
          v-model="queryParams.attr4"
          placeholder="请输入预留字段4"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['mes:md:template:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['mes:md:template:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['mes:md:template:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['mes:md:template:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="规格模板ID" align="center" prop="templateId" />
      <el-table-column label="模板编码" align="center" prop="templateCode" />
      <el-table-column label="模板名称" align="center" prop="templateName" />
      <!-- <el-table-column label="属性ID" align="center" prop="attrId" /> -->
      <!-- <el-table-column label="属性名" align="center" prop="attrName" /> -->
      <!-- <el-table-column label="输入类型" align="center" prop="showType"> -->

      </el-table-column>
      <el-table-column label="是否启用" align="center" prop="enableFlag">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.mes_enable_status" :value="scope.row.enableFlag"/>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
      <!-- <el-table-column label="预留字段1" align="center" prop="attr1" />
      <el-table-column label="预留字段2" align="center" prop="attr2" />
      <el-table-column label="预留字段3" align="center" prop="attr3" />
      <el-table-column label="预留字段4" align="center" prop="attr4" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['mes:md:template:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['mes:md:template:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改规格模板对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="模板编码" prop="templateCode">
          <el-input v-model="form.templateCode" placeholder="请输入模板编码" />
          <el-switch v-model="autoTemplateCode" active-text="自动生成编码" @change="createTemplateCode">
          </el-switch>
        </el-form-item>
        <el-form-item label="模板名称" prop="templateName">
          <el-input v-model="form.templateName" placeholder="请输入种类模板名称" />
        </el-form-item>
        <!-- <el-form-item label="属性ID" prop="attrId">
          <el-input v-model="form.attrId" placeholder="请输入属性ID" />
        </el-form-item> -->

        <el-form-item label="属性名" prop="attrName">
          <el-row span=24 v-for="(attr,index) in form.itemAttrs" style="margin: 10px;">
            <el-col :span="11">
              <!-- <el-form-item label="属性名" prop="attrName"> -->
                <el-select v-model="attr.attrName" placeholder="选择属性" clearable value-key="attrId"  @change="setAttrId(attr)">
                  <el-option v-for="attrItem in attrList" :key="attrItem.attrId" :label="attrItem.attrName"
                    :value="attrItem.attrId + '_' +attrItem.attrName"/>
                </el-select>
              <!-- </el-form-item> -->
            </el-col>
            <el-col :span="11" style="padding: 0 10px;">
              <el-switch
                v-model="attr.showType"
                :active-value="1"
                :inactive-value="0"
                active-text="数值"
                inactive-text="字符串">
              </el-switch>
            </el-col>
            <el-col :span="2" style="text-align: center;">
              <el-link type="danger" icon="el-icon-delete" :underline="false" @click="delAttrItem(index)"></el-link>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item>
          <el-button @click="addAttr">添加属性</el-button>
        </el-form-item>

        <!-- <el-form-item label="数据行状态(0:正常/1:删除)" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入数据行状态(0:正常/1:删除)" />
        </el-form-item> -->
        <el-form-item label="是否启用" prop="enableFlag">
          <el-select
            placeholder="启用状态"
            clearable
            style="width: 215px"
            v-model="form.enableFlag"
          >
          <el-option
            v-for="dict in dict.type.mes_enable_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
          </el-select>
          <!-- <el-input v-model="form.enableFlag" placeholder="请输入是否启用" /> -->
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <!-- <el-form-item label="预留字段1" prop="attr1">
          <el-input v-model="form.attr1" placeholder="请输入预留字段1" />
        </el-form-item>
        <el-form-item label="预留字段2" prop="attr2">
          <el-input v-model="form.attr2" placeholder="请输入预留字段2" />
        </el-form-item>
        <el-form-item label="预留字段3" prop="attr3">
          <el-input v-model="form.attr3" placeholder="请输入预留字段3" />
        </el-form-item>
        <el-form-item label="预留字段4" prop="attr4">
          <el-input v-model="form.attr4" placeholder="请输入预留字段4" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listTemplate,
    getTemplate,
    delTemplate,
    addTemplate,
    updateTemplate
  } from "@/api/mes/md/template";
import { listAttr } from "@/api/mes/md/attr";
  export default {
    dicts: ['mes_enable_status', 'mes_attr_input_type'],
    name: "Template",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 规格模板表格数据
        templateList: [],
        // 属性列表数据
        attrList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 自动生成编码
        autoTemplateCode: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          templateCode: null,
          templateName: null,
          attrId: null,
          attrName: null,
          showType: null,
          enableFlag: null,
          attr1: null,
          attr2: null,
          attr3: null,
          attr4: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          templateCode: [{
            required: true,
            message: "模板编码不能为空",
            trigger: "blur"
          }],
          templateName: [{
            required: true,
            message: "种类模板名称不能为空",
            trigger: "blur"
          }],
          delFlag: [{
            required: true,
            message: "数据行状态(0:正常/1:删除)不能为空",
            trigger: "blur"
          }],
        }
      };
    },
    created() {
      this.getList();
      this.getAttrList();
    },
    methods: {
      /** 设置属性ID列表 */
      setAttrId(attr) {
        attr.attrId = attr.attrName.split('_')[0];
        attr.attrName = attr.attrName.split('_')[1];
      },
      /** 获取属性规格列表 */
      getAttrList() {
       listAttr(null).then(response => {
         this.attrList = response.rows;
       });
      },
      /** 添加属性规格框 */
      addAttr() {
        this.form.itemAttrs.push({
          attrId: null,
          attrName: null,
          showType: null
        })
      },
      /** 删除属性规格框 */
      delAttrItem(index) {
        this.form.itemAttrs.splice(index, 1);
      },
      /** 生成模板编码 */
      createTemplateCode() {
        var date = new Date();
        if (this.autoTemplateCode) {
          this.form.templateCode = "TPL" + date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date
            .getMilliseconds();
        } else {
          this.form.templateCode = null;
        }
      },
      /** 查询规格模板列表 */
      getList() {
        this.loading = true;
        listTemplate(this.queryParams).then(response => {
          this.templateList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          templateId: null,
          templateCode: null,
          templateName: null,
          // attrId: null,
          // attrName: null,
          // showType: null,
          itemAttrs: [{
            attrId: null,
            attrName: null,
            showType: null
          }],
          delFlag: null,
          enableFlag: null,
          remark: null,
          attr1: null,
          attr2: null,
          attr3: null,
          attr4: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.templateCode)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加规格模板";
        this.autoTemplateCode = false;
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const templateCode = row.templateCode || this.ids
        getTemplate(templateCode).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改规格模板";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.templateId != null) {
              updateTemplate(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addTemplate(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const templateCodes = row.templateCode || this.ids;
        this.$modal.confirm('是否确认删除规格模板编号为"' + templateCodes + '"的数据项？').then(function() {
          return delTemplate(templateCodes);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('mes/md/template/export', {
          ...this.queryParams
        }, `template_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
<style scoped>
</style>
